<template>
  <div id="building">
    <div style="width: 100% ;height: 90%;">
      <div slot="header" class="clearfix" style="text-align: center">
                    <span style="color: #ffffff;
                                font-size: 30px;
                                font-weight: 800;
                                font-family: 华文仿宋;">
                                食物详细信息检索
                    </span>
      </div>
      <div style="margin: auto;width:50%">
        <el-input
            rounded
            outlined
            clearable
            v-model="search"
            :placeholder="placeholderText"
            bg-color="black"
            @keyup.enter.native="searchtext"
            @input="changetext()"
            id="input" style="border-color: white">
          <template slot="append">

            <el-button type="primary" icon="el-icon-search" plain @click="Search"></el-button>

          </template>
        </el-input>
      </div>
        <div style="width: 50%;margin: auto" v-if="content">
          <el-row :gutter="16" style="margin-top:10px;" v-for="(o, index) in content.length" :key="o"
                  :offset="index > 0 ? 2 : 0">

            <el-col :span="12">
              <el-card style="margin-right: 40px" v-if="index%2 === 0&&content[index]">
                <div style="text-align: center" >
                                  <el-image
                                      :src=content[index].img
                                      style="width: 300px; height: 300px" referrerPolicy="no-referrer"></el-image>
                </div>

                <div style="margin-left: 0px;margin-top: 10px;">
                  <div style="margin-bottom:10px">
                                     <span style="height:30px;margin:10px 0px 0px 0px;width:60%;color: black;
                                    font-size: 20px;
                                    font-weight: 400;
                                    font-family: 华文行楷;" >{{ content[index].name }}</span>
                  </div>
                </div>

                <div class="bottom clearfix">
                                    <span style="height:30px;margin:20px 10px 0px 0px;width:60%;color: black;
                                    font-size: 15px;
                                    font-weight: 400;
                                    font-family: 华文仿宋;" >{{ content[index].name }}</span>
                </div>
                <div style="float: right;margin-bottom: 10px" >
                  <el-button type="text" class="button" @click="details(content[index].name)">详情</el-button>
                </div>
              </el-card>
            </el-col>

            <el-col :span="12">
              <el-card style="margin-left: 40px" v-if="index%2 === 0&&content[index+1]">
                <div style="text-align: center" >
                                  <el-image
                                      :src="content[index+1].img "
                                      style="width: 300px; height: 300px" referrerPolicy="no-referrer"></el-image>
                </div>

                <div style="margin-left: 0px;margin-top: 10px;">
                  <div style="margin-bottom:10px">
                                     <span style="height:30px;margin:10px 0px 0px 0px;width:60%;color: black;
                                    font-size: 20px;
                                    font-weight: 400;
                                    font-family: 华文行楷;" >{{ content[index + 1].name }}</span>
                  </div>
                </div>

                <div class="bottom clearfix">
                                    <span style="height:30px;margin:20px 10px 0px 0px;width:60%;color: black;
                                    font-size: 15px;
                                    font-weight: 400;
                                    font-family: 华文仿宋;" >{{ content[index + 1].name }}</span>
                </div>

                <div style="float: right;margin-bottom: 10px" >
                  <el-button type="text" class="button" @click="details(content[index+1].name)">详情</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

      <Transition style="margin-top: 50px" v-else></Transition>
    </div>
    <div style="text-align: center;padding-top: 100px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesetting.currentpage"
          :page-size="pagesetting.pagesize"
          layout="total, prev, pager, next, jumper"
          :total="pagesetting.totalpage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { rename } from "fs";
import {getData, getSearch, getTotal} from "@/api/index/function";
import Transition from "@/pages/Intelligent_diagnosis/components/Transition";
// import axios from "axios";
export default {
  name: 'DrugSearch',
  components: {
    Transition
  },
  data() {
    return {
      currentPage1: 3,
      pagesetting: {
        currentpage: 1,
        totalpage: 100,
        pagesize: 6
      },
      content: [],
      ifGet:false,
      pagination: {
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 17,
        total: 7,
      },
      sort: '药材',
      search: '',//搜索框文字
      flag: '请输入药材名称，例如：山药、陈皮、薄荷等......',
      Visible: false
    }
  },
  computed: {
    placeholderText() {
      return this.flag
    }
  },

  watch: {
    'pagination.page': function () {//用来监听数据的变化
      this.$root.$emit('searchStatus')
    },
    'pagesetting.currentpage': function () {
      console.log(this.pagesetting.currentpage)
      if (this.search === '')
        this.getPagination(this.pagesetting.currentpage)
      else {
        getSearch(this.search, this.pagesetting.currentpage).then(res => {
          // console.log(res.data.food)
          this.content = res.data.food
          this.pagesetting.totalpage = res.data.pagenum
        })
      }

    },
  },
  mounted() {
    this.$root.$emit('searchStatus')

  },
  created() {
    this.getPagination(this.pagesetting.currentpage);
    getTotal().then(res => {
      console.log(res.data.pagenum)
      this.pagesetting.totalpage = res.data.pagenum
    })
  },

  methods: {
    changetext() {
      getSearch(this.search, this.pagesetting.currentpage).then(res => {
        this.content = res.data.food
        this.pagesetting.totalpage = res.data.pagenum
      })
    },
    searchtext() {
      this.pagesetting.currentpage = 1//搜索之后自动置为第一页
      getSearch(this.search, this.pagesetting.currentpage).then(res => {
        this.content = res.data.food
        this.pagesetting.totalpage = res.data.pagenum
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getPagination(value) {
      getData(value).then(res => {
        this.content = res.data.food
      })

    },
    Search() {
      this.search = ''
    },
    details(val) {
      this.$router.push({path: "/drugResult?name=" + val})
    },
  }
}
</script>

<style scoped>

#loader {
  display: block;
  position: relative;
  top: 20%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000;
  -webkit-animation: spin 5s linear infinite;
  -ms-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  -o-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000;
  -webkit-animation: spin 8s linear infinite;
  -ms-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  -o-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #000;
  -webkit-animation: spin 8s linear 1s infinite;
  -ms-animation: spin 8s linear 1s infinite;
  -moz-animation: spin 8s linear 1s infinite;
  -o-animation: spin 8s linear 1s infinite;
  animation: spin 8s linear 1s infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#loader_wrapper .load_title {
  margin-top: 10px;
  font-family: "Open Sans";
  font-size: 20px;
  width: 100%;
  text-align: center;
  z-index: 9999;
  /* position: absolute; */
  top: 80%;
  opacity: 1;
  line-height: .3rem;
}

.el-row {
  margin-bottom: 20px;
  margin-top: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  /* background:#f9fafc; */

}

.bg-purple {
  /* background: #d3dce6; */
  border: 1px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.bg-purple-light {
  /* background: black; */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

#building {
  background: url("../../../assets/sousuobackground.jpg");
  background-size: 100% 100%;
  opacity: 0.8;
}
</style>
